<template>
	<view class="content">
		<view class="waterBox">
			<u-waterfall v-model="shopList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<shop v-for="(item,index) in leftList" :key="index" :shopimg="item.image" :shopname="item.name"  :newprice="item.price"  @click.native="go_shopdetail(item)"></shop>
				</template>
				<template v-slot:right="{rightList}">
					<shop v-for="(item,index) in rightList" :key="index" :shopimg="item.image" :shopname="item.name"  :newprice="item.price" @click.native="go_shopdetail(item)"></shop>
				</template>
			</u-waterfall>
		</view>
	</view>
</template>

<script>
	import shop from "../../components/shop.vue"
	
	export default {
		components:{
			shop
		},
		data() {
			return {
				timestamp:0,
				shopList:[],
				sales:0,
				price:0,
				page:1,
				name:''
			}
		},
		onLoad() {
			this.getshopList(1,1,1)
		},
		onReachBottom() {//触底获取推荐商品
			this.page+=1
			// console.log(this.page);
			// this.shopList = []
			this.getshopList(this.page,this.sales,this.price) 
		},
		methods: {
			input(){
				this.shopList=[]
				this.$refs.uWaterfall.clear(); //清空列表数据
				this.getshopList(1,'','')
			},
			go_shopdetail(e){
				uni.navigateTo({
					url:'../shop/shopDetail?shopid='+e.goods_id
				})
			},
			
			getshopList(){ //获取商品列表
				
				this.$myRequest({
					url: 'api/user/user_goods',
					method:'POST',
				}).then(res => {
					console.log(res.data);
					if(res.data.code==1){
						let data=res.data.data
						this.shopList = data.user_goods
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{background-color: #F7F7F7;}
.content{
	width: 90%;
	margin: auto;
	.top-view {
		margin: 20rpx auto;
		height: 80rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
		input {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 80rpx;
			color: #807B7A;
			margin-left: 40rpx;
		}
		.serce{
			color: #807B7A;
		}
	}
	.timeLimit{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 20rpx 0 40rpx 0;
		.timeLeft,.timeRight{
			width: 38%;
			height: 120rpx;
			font-size: 14px;
			line-height: 20px;
			color: #333333;
			padding: 16px;
			border-radius: 16rpx;
		}
		image{
			width:160rpx;
			height: 104rpx;
			margin-left: 54rpx;
			margin-top: 24rpx;
		}
		.contents{
			font-size: 12px;
			color: #999999;
		}
		.timeLeft{
			background: linear-gradient(180deg, #FFDFB5 0%, #FFFFFF 100%);
		}
		.timeRight{
			background: linear-gradient(180deg, #FF9C9C 0%, #FFFFFF 100%);
		}
	}
	.options{
		padding-bottom: 20rpx;
		.option{
			padding-right: 50rpx;
		}
	}
	
}
</style>
